<template>
  <div class="calendar">
    <header>
      <ul>
        <li @click="$router.go(-1)">
          <van-icon @click="$router.back()" style="color:#198bfa" name="arrow-left" />
        </li>
        <li>学习日历</li>
        <li><van-icon name="search" /></li>
      </ul>
    </header>
    <ul class="calendar-ym">
      <li @click="lt"><van-icon name="arrow-left" /></li>
      <li v-text="`${years}年${months}月`"></li>
      <li @click="gt"><van-icon name="arrow" /></li>
    </ul>
    <ul class="calendar-day">
      <li
        v-for="(itme, index) in days"
        :key="itme"
        :class="{ dateclass: new Date().getDay() === index }"
      >
        {{ itme }}
      </li>
    </ul>..
    <ul class="calendar-date">
      <li
        v-for="i in dates"
        :key="i"
        :class="{ dateclass: new Date().getDate() === i }"
      >
        {{ i }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  data() {
    return {
      days: ["日", "一", "二", "三", "四", "五", "六"],
      dates: [],
      years: new Date().getFullYear(),
      months: new Date().getMonth() + 1,
      vacancy: null,
    };
  },
  methods: {
    //获取上一个月
    lt() {
      this.months--;
      if (this.months === 0) {
        this.months = 12;
        this.years--;
      }
    },
    //获取下一个月
    gt() {
      this.months++;
      if (this.months === 12) {
        this.months = 1;
        this.years++;
      }
    },
  },
  computed: {
    //获取当月有多少天
    getdate() {
      let nexMonth = this.months;
      let d = new Date(this.years, nexMonth, 0);
      return d.getDate();
    },
    //获取当月1号是星期几
    getday() {
      let nexMonth = this.months - 1;
      let d = new Date(this.years, nexMonth, 1);
      return d.getDay();
    },
  },
  mounted() {
    //遍历出当月的天数，增加到dates数组中
    for (let i = 1; i <= this.getdate; i++) {
      this.dates.push(i);
    }
    //遍历出当前的1号是星期几,使1号出现在对应的星期几上
    for (let i = 0; i < this.getday; i++) {
      this.dates.unshift(this.vacancy);
    }
  },
  watch: {
    months() {
      //遍历出选择月份的天数，增加到dates数组中
      this.dates = [];
      for (let i = 1; i <= this.getdate; i++) {
        this.dates.push(i);
      }
      //遍历出选择月份的1号是星期几,使1号出现在对应的星期几上
      for (let i = 0; i < this.getday; i++) {
        this.dates.unshift(this.vacancy);
      }
    },
  },
};
</script>
<style scoped lang='scss'>
.calendar {
  width: 100%;
  height: 100%;
  font-size: 16px;
  header {
    width: 100%;
    height: 50px;
    line-height: 30px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    ul {
      display: flex;
      justify-content: space-between;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
  .calendar-ym {
    width: 100%;
    height: 80px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .calendar-day {
    width: 100%;
    height: 60px;
    padding: 10px;
    line-height: 40px;
    display: flex;
    box-sizing: border-box;
    li {
      width: 14%;
      // line-height: 40px;
      text-align: center;
    }
  }
  .calendar-date {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    li {
      width: 14%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .dateclass {
      background: #eb6100;
      color: #fff;
      border-radius: 50%;
    }
  }
}
</style>
